import {Icon, Scroll} from "plain-design";
import {designComponent, Fragment, reactive, useModel} from "@peryl/react-compose";
import './AppMenu.scss';
import {getMenuName, iAppMenuGroup, MenuGroups, MenuUtils} from "../menus";
import {MenuCollapse} from "./MenuCollapse";
import {microApp} from "../microApp";

export const AppMenu = designComponent({
  name: 'app-menu',
  props: {
    size: { type: Number },
    collapse: { type: Boolean },
  },
  emits: {
    onUpdateSize: (val?: number) => true,
    onUpdateCollapse: (val: boolean) => true,
  },
  setup({ props, event: { emit } }) {

    const sizeModel = useModel(() => props.size, emit.onUpdateSize);

    const collapseModel = useModel(() => props.collapse, emit.onUpdateCollapse);

    const state = reactive({
      groupExpandMap: {} as Record<string, boolean | undefined>,
      refreshState: 0,
      isResizing: false,
    });

    const handler = {
      toggle: (group: Omit<iAppMenuGroup, 'menus'>) => {
        state.groupExpandMap = {
          // ...state.groupExpandMap,
          [group.id]: !state.groupExpandMap[group.id]
        };
      },
    };

    return () => (
      <div className="app-menu">
        <div className="app-menu-content">
          <div className="app-menu-content-inner">
            <Scroll refreshState={state.refreshState + (sizeModel.value || 0)} scrollbarSize={4} alwaysShowScrollbar>
              <div className="app-menu-group-list">
                {MenuGroups.data.map((group) => {
                  const activeMenu = group.menus.find(menu => menu.id === microApp.state.current?.tab.id);
                  return (
                    <Fragment key={group.id}>
                      <div className="app-menu-group" onClick={() => handler.toggle(group)} data-active={String(!!activeMenu)}>
                        <Icon icon={group.icon} className="app-menu-group-icon" strokeWidth={3}/>
                        {!collapseModel.value && (
                          <>
                            <div className="app-menu-group-name" title={getMenuName(group)}>{getMenuName(group)}</div>
                            <div className="app-menu-group-expander">
                              <Icon icon={state.groupExpandMap[group.id] ? 'pi-up' : 'pi-down'}/>
                            </div>
                          </>
                        )}
                      </div>
                      {!collapseModel.value && (
                        <MenuCollapse show={state.groupExpandMap[group.id]} onTransitionend={() => state.refreshState++}>
                          <div className="app-menu-item-list">
                            {group.menus.map(menu => (
                              <div className="app-menu-item" key={menu.id} title={getMenuName(menu)} data-active={String(activeMenu?.id === menu.id)} onClick={() => {
                                if (!menu.path) {
                                  console.warn('menu path is empty!');
                                } else {
                                  MenuUtils.openMenu(menu, group);
                                }
                              }}>
                                {getMenuName(menu)}
                              </div>
                            ))}
                          </div>
                        </MenuCollapse>
                      )}
                    </Fragment>
                  );
                })}
              </div>
            </Scroll>
          </div>
        </div>
      </div>
    );
  },
});
